<template>
    <div id="shopHomeDetail">
        <div class="shopHomeDetail-box">
<!--        <header class="shopHomeDetail">-->
<!--          <van-icon name="arrow-left" @click="$router.push('/shopDetail')" />-->
<!--            <span>商家详情</span>-->
<!--        </header>-->
          <Top class="shopHomeDetail"><p>商家详情</p></Top>
        <div>
        <section class="activities_container">
            <header >活动与属性</header>
            <ul class="actibities_ul">
                <li >
                    <span  style="background-color: rgb(240, 115, 115);">减</span> <span >{{jian}}(APP专享)</span>
                </li>
            </ul>
            <ul class="actibities_ul">
                <li >
                    <span style="background-color: rgb(153, 153, 153);">保</span>
                    <span >{{bao}}(APP专享)</span>
                </li>
                <li >
                    <span style="background-color: rgb(87, 169, 255);">准</span>
                    <span >{{zhun}}(APP专享)</span>
                </li>
                <li >
                    <span style="background-color: rgb(153, 153, 153);">票</span>
                    <span >{{piao}}(APP专享)</span>
                </li>
            </ul>

        </section>
        <section class="shop_status_container">
            <a href="#/shopdetail/shophom/shopsafe" class="shop_status_header">
                <span class="shop_detail_title">食品监督安全公示</span>
                <div>
                    <span class="identification_detail">企业认证详情</span>
                    <svg  width="14" height="14" xmlns="http://www.w3.org/2000/svg" version="1.1" class="description_arrow"><path data-v-ca49b092="" d="M0 0 L8 7 L0 14" stroke="#bbb" stroke-width="1.5" fill="none"></path></svg>
                </div>
            </a>
            <section class="shop_statu_detail">
                <div >
                    <svg  class="res-well"><use data-v-ca49b092="" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#res-bad"></use><symbol viewBox="0 0 1024 1024" id="res-bad"><path fill="#D0021B" fill-rule="evenodd" d="M512 0C230.326 0 0 230.326 0 512s230.573 512 512 512 512-230.326 512-512S793.674 0 512 0zM240.694 373.755l158.735-56.285 15.306 46.164L256 419.919l-15.306-46.164zm440.409 384.123c-10.122 0-20.49-10.122-25.674-20.49-10.122-10.122-61.47-25.674-148.366-25.674-86.896 0-138.245 15.306-148.366 25.674 0 10.122-10.122 20.49-25.674 20.49s-25.674-10.122-25.674-25.674c0-71.591 174.041-71.591 194.53-71.591 20.489 0 194.53 0 194.53 71.591 10.122 10.368 0 25.674-15.306 25.674zM768 419.919l-163.672-61.47 15.306-46.164 158.735 56.285-10.368 51.348-.001.001z"></path></symbol></svg>
                </div>
                <div  class="check_date">
                    <p ><span >监督检查结果：</span>
                        <span class="shop_status_bad">差</span>
                    </p>
                    <p >
                        <span >检查日期：</span><span></span>
                    </p>
                </div>
            </section>
        </section>
        <section  class="shop_status_info">
            <header >商家信息</header>
            <p >{{name}}</p>
            <p >地址：{{address}}</p>
            <p >营业时间：{{opening_hours}}</p>
            <p @click="getImg('营业执照')"><span >营业执照</span>
                <svg  width="14" height="14" xmlns="http://www.w3.org/2000/svg" version="1.1" class="description_arrow"><path data-v-ca49b092="" d="M0 0 L8 7 L0 14" stroke="#bbb" stroke-width="1.5" fill="none"></path></svg>
            </p>
            <p @click="getImg('餐饮服务许可证')"><span >餐饮服务许可证</span>
                <svg width="14" height="14" xmlns="http://www.w3.org/2000/svg" version="1.1" class="description_arrow"><path data-v-ca49b092="" d="M0 0 L8 7 L0 14" stroke="#bbb" stroke-width="1.5" fill="none"></path></svg>
            </p>
        </section>
            <img v-if="str=='营业执照'" :src="'//elm.cangdu.org/img/'+business_license_image">
            <section class="license_container" @click="clearMask()" v-if="xukezheng">
                <img v-if="str=='营业执照'" :src="'//elm.cangdu.org/img/'+business_license_image">
                <img v-if="str=='餐饮服务许可证'" :src="'//elm.cangdu.org/img/'+catering_service_license_image">
            </section>
        </div>
        </div>
        <transition enter-active-class="animate__animated animate__slideInRight">
            <router-view></router-view>
        </transition>
    </div>
</template>
<script>
    import Top from "@/components/Top";
    export default {
        name: "ShopHomeDetail",
      components: {Top},
      data:function () {
            return{
                str:"",
                jian:"",//减
                bao:"",//保
                zhun:"",//准
                piao:"",//票
                name:"",//店名
                address:"",//店铺地址
                opening_hours:"",//开门时间
                business_license_image:"",//营业许可证
                catering_service_license_image:"",//餐饮许可证
                xukezheng:false,
            }
        },
        methods:{
            getImg(a){
                this.str =a;
                this.xukezheng = true;
            },
            clearMask(){
                this.xukezheng = false;
            }
        },
        created() {
        //    从state里面获取当前点击店铺的对象
            let shopObj = this.$store.state.shop;
            console.log(shopObj);
            this.jian = shopObj.activities[0].description;
            this.bao = shopObj.supports[0].description;
            this.zhun = shopObj.supports[1].description;
            this.piao = shopObj.supports[2].description;
            this.name = shopObj.name;
            this.address = shopObj.address;
            this.opening_hours = shopObj.opening_hours[0]
            this.business_license_image = shopObj.license.business_license_image;
            this.catering_service_license_image = shopObj.license.catering_service_license_image;
        }
    }
</script>

<style scoped>
    #shopHomeDetail>a{
        width: 100%;
        height: 100%;
    }
    #shopHomeDetail {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2222;
        background-color: rgb(241,241,241);
        overflow-y: scroll;
    }
    #shopHomeDetail{
        width: 100%;
        height: 100%;
        overflow-y: scroll;
    }
    .shopHomeDetail-box{
        width: 100%;
        height: 100%;

    }
    .shopHomeDetail {
        width: 100%;
        height: 3rem;
        //font-size: 1.1rem;
        position: relative;
        background-color: #3190e8;
        //color: white;
    }
    header > .van-icon {
        width: 1.7rem;
        height: 1.7rem;
        position: absolute;
        left: 1rem;
        margin: auto;
        top: 0;
        bottom: 0;
    }
    .shopHomeDetail > span:first-of-type {
        font-size: 1.5rem;
        position: absolute;
        top: 1rem;
        margin: auto;
        font-weight: bold;
        left: 9rem;
    }
    .activities_container {
        background-color: #fff;
        margin: .65rem 0;
        padding-bottom: .6rem;
    }
    .activities_container header {
         font-size: 1rem;
         color: #333;
         line-height: 1.8rem;
         padding-left: .6rem;
         border-bottom: 0.15rem solid #f1f1f1;
         margin-bottom: .3rem;
     }
    .activities_container .actibities_ul{
        padding: 0 .6rem;
        font-size: 0.7rem!important;
    }
    .activities_container .actibities_ul li {
        margin-bottom: .2rem;
        padding: 0.5rem 0;
    }
    element.style {
        background-color: rgb(240, 115, 115);
    }
    .activities_container .actibities_ul li span:first-of-type {
        font-size: .45rem;
        color: #fff;
        padding: .1rem;
        border: 1px;
        border-radius: .1rem;
        margin-right: .2rem;
    }
    .activities_container .actibities_ul li span:nth-of-type(2) {
        font-size: .55rem;
        color: #666;
    }
    .activities_container .actibities_ul li{
        margin-bottom: .2rem;
    }
    element.style {
        background-color: rgb(153, 153, 153);
    }
    .activities_container .actibities_ul li span:first-of-type {
        font-size: .45rem;
        color: #fff;
        padding: .1rem;
        border: 1px;
        border-radius: .1rem;
        margin-right: .2rem;
    }
    .activities_container .actibities_ul li span:nth-of-type(2) {
        font-size: .55rem;
        color: #666;
    }
/*    食品安全公示*/
    .shop_status_container{
        background-color: #fff;
        margin-bottom: .4rem;
    }
    .shop_status_container .shop_status_header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        line-height: 2rem;
        padding: 0 .6rem;
        border-bottom: .025rem solid #f1f1f1;
    }
    .shop_status_container .shop_status_header .shop_detail_title {
        font-size:1rem;
        color: #333;
    }
    .shop_status_container .shop_status_header .identification_detail{
        font-size: .7rem;
        color: #bbb;
        vertical-align: middle;
        margin-right: 0.15rem;
    }
    .shop_status_container .shop_status_header svg {
        width: 1rem;
        height: 1rem;
        vertical-align: middle;
    }
    .shop_status_container .shop_statu_detail {
        display: flex;
        padding: .6rem;
    }
    .shop_status_container .shop_statu_detail svg {
        width: 2rem;
        height: 2rem;
        margin-right: .6rem;
    }
    .shop_status_container .shop_statu_detail .check_date span {
        font-size: .55rem;
        color: #666;
    }
    .shop_status_container .shop_statu_detail .check_date .shop_status_bad{
        color: red;
    }
    .shop_status_container .shop_statu_detail .check_date span {
        font-size: .55rem;
        color: #666;
    }
    .shop_status_info {
        background-color: #fff;
        margin-bottom: .4rem;
    }
    .shop_status_info header{
        line-height: 1.8rem;
        padding: 0 .6rem;
        font-size: 1rem;
        color: #333;
        border-bottom: .025rem solid #f1f1f1;
    }
    .shop_status_info p{
        font-size: .8rem;
        color: #666;
        padding: .7rem .6rem .7rem 0;
        margin-left: .6rem;
        border-bottom: .025rem solid #f5f5f5;
    }
    .shop_status_info p:nth-of-type(4), .shop_status_info p:nth-of-type(5) {
        display: flex;
        justify-content: space-between;
    }
    .shop_status_info span{
        color: #666;
    }
    .license_container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,.5);
        z-index: 101;
    }
    .license_container img {
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
</style>